Vue.component('temp-mould', {
  props: {
    data: {
      default: function() {
        return []
      }
    },
    readonly: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data: function() {
    return {
      selectedTab: 'tab-1',
      total: 0,
      baseInfoForm: {
        name: '基本信息',
        rfqTempItemCode: 'MOULD_BASE_INFO',
        form: {
          col1: '',
          col2: '',
          col3: '',
          col4: '',
          col5: '',
          col6: '',
          col7: '',
          col8: '',
          col9: '',
          col10: '',
          col11: '',
          col12: [
            {
              length: '',
              width: '',
              height: ''
            },
            {
              length: '',
              width: '',
              height: ''
            },
            {
              length: '',
              width: '',
              height: ''
            },
            {
              length: '',
              width: '',
              height: ''
            },
            {
              length: '',
              width: '',
              height: ''
            }
          ],
          col13: '',
          col14: '',
          col15: '',
          col16: '',
          col17: '',
          col18: '',
          col19: '',
          col20: '',
          col21: ''
        },
        total: 0,
        ratio: '0.00%'
      },
      // table 2
      designForm: {
        name: '设计成本',
        rfqTempItemCode: 'MOULD_DESIGN',
        form: {
          rows:[
            {
              name: '模具设计',
              col1: '',
              col2: '',
              col3: '',
              col4: '',
            }
          ]
        },
        total: 0,
        ratio: '0.00%'
      },
      // table 3
      meterialForm: {
        name: '材料成本',
        rfqTempItemCode: 'MOULD_RAW_MAT',
        form: {
          typeOne: {
            name: '模具钢',
            rows: [
              {
                detail: '模 架',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '型 腔',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '型 芯',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '镶 件',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '滑 块',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '斜顶杆',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '其 它',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          },
          typeTwo: {
            name: '暂无',
            rows: [
              {
                detail: '定位/导向',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '脱模/顶出',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '冷 却',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '紧 固',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '弹 簧',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '油 缸',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '气 缸',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '浇道/热流道',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              },
              {
                detail: '其 它',
                col1: '',
                col2: '',
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          },
          typeThree: {
            name: '铍 铜',
            rows: [
              {
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          },
          typeFour: {
            name: '铝 合 金',
            rows: [
              {
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          },
          typeFive: {
            name: '隔热材料',
            rows: [
              {
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          },
          typeSix: {
            name: '紫 铜',
            rows: [
              {
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          },
          typeSeven: {
            name: '石 墨',
            rows: [
              {
                col3: '',
                col4: '',
                col5: '',
                col6: ''
              }
            ]
          }
        },
        total: 0,
        ratio: '0.00%'
      },
      // table 4
      machineForm: {
        name: '机加工成本',
        rfqTempItemCode: 'MOULD_MACHINE',
        form: {
          rows: [
            {
              name: 'CNC（普通）',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: 'CNC（五轴/3+2）',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '电火花',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '镜面电火花',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '线切割',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '慢丝线切割',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '深孔钻',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '普通机加工',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            }
          ]
        },
        total: 0,
        ratio: '0.00%'
      },
      // table 5
      personForm: {
        name: '人工/其它加工成本',
        rfqTempItemCode: 'MOULD_OTHERS',
        form: {
          rows: [
            {
              name: '钳工',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '抛光',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '皮纹',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '表面处理',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '特种热处理',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '三坐标测量',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '物流运输',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            },
            {
              name: '试模费用',
              col1: '',
              col2: '',
              col3: '',
              col4: ''
            }
          ]
        },
        total: 0,
        ratio: '0.00%'
      },
    }
  },
  template: `
    <q-tabs inverted color="primary" v-model.trim="selectedTab">
      <q-tab slot="title" name="tab-1" label="基本信息"></q-tab>
      <q-tab slot="title" name="tab-2" label="设计成本"></q-tab>
      <q-tab slot="title" name="tab-3" label="材料成本"></q-tab>
      <q-tab slot="title" name="tab-4" label="机加工成本"></q-tab>
      <q-tab slot="title" name="tab-5" label="人工/其它加工成本"></q-tab>

      <q-tab-pane name="tab-1" class="q-pa-none">
        <div class="row q-pa-md">总计：{{total}}</div>
        <div class="q-table-container q-table-dense no-shadow">
          <table class="table-1 q-table q-table-cell-separator">
            <tbody>
              <tr>
                <td>零部件供应商</td>
                <td>
                  <q-input :readonly="readonly" hide-underline v-model.trim="baseInfoForm.form.col1"></q-input>
                </td>
                <td>模具供应商</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col2"></q-input>
                </td>
                <td rowspan="24"></td>
              </tr>
              <tr>
                <td>联系人</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col3"></q-input>
                </td>
                <td>联系人</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col4"></q-input>
                </td>
              </tr>
              <tr>
                <td>电话/传真</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col5"></q-input>
                </td>
                <td>电话/传真</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col6"></q-input>
                </td>
              </tr>
              <tr>
                <td>邮箱</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col7"></q-input>
                </td>
                <td>邮箱</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col8"></q-input>
                </td>
              </tr>
              <tr>
                <td>总成</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col9"></q-input>
                </td>
              </tr>
              <tr>
                <td>零件名称/编号</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col10"></q-input>
                </td>
              </tr>
              <tr>
                <td>模具类型</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col11"></q-input>
                </td>
              </tr>
              <tr>
                <td :rowspan="baseInfoForm.form.col12.length+1">模具尺寸（mm）</td>
                <td>长</td>
                <td>宽</td>
                <td>高</td>
              </tr>
              <tr v-for="(item, index) in baseInfoForm.form.col12" :key="item.index">
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.length"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.width"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.height"></q-input>
                </td>
              </tr>
              <tr>
                <td>模具重量（吨）</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col13"></q-input>
                </td>
              </tr>
              <tr>
                <td>模具型腔数</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col14"></q-input>
                </td>
              </tr>
              <tr>
                <td>模具寿命（万次）</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col15"></q-input>
                </td>
              </tr>
              <tr>
                <td>产品外形尺寸</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col16"></q-input>
                </td>
              </tr>
              <tr>
                <td rowspan="2">交货期L/T(天）</td>
                <td>第一次试模</td>
                <td>第二次试模</td>
                <td>正式交付</td>
              </tr>
              <tr>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col17"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col18"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col19"></q-input>
                </td>
              </tr>
              <tr>
                <td>交货地点</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col20"></q-input>
                </td>
              </tr>
              <tr>
                <td>交货保险担当</td>
                <td colspan="3">
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="baseInfoForm.form.col21"></q-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </q-tab-pane>
      <q-tab-pane name="tab-2" class="q-pa-none">
        <div class="row q-pa-md">总计：{{total}}</div>
        <div class="q-table-container q-table-dense no-shadow">
          <table class="table-2 q-table q-table-cell-separator">
            <tbody>
              <tr>
                <td>工序</td>
                <td>工时</td>
                <td>单价</td>
                <td>金额</td>
                <td>比例%</td>
              </tr>
              <tr v-for="item in designForm.form.rows" :key="item.name">
                <td>{{ item.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col1"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col2"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col4"></q-input>
                </td>
              </tr>
              <tr>
                <td colspan="3">合计</td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="designForm.total"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="designForm.ratio"></q-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </q-tab-pane>
      <q-tab-pane name="tab-3" class="q-pa-none">
        <div class="row q-pa-md">总计：{{total}}</div>
        <div class="q-table-container q-table-dense no-shadow">
          <table class="table-3 q-table q-table-cell-separator">
            <tbody>
              <tr>
                <td>类别</td>
                <td>明细</td>
                <td>厂家/品牌</td>
                <td>型号/规格</td>
                <td>数量/重量(kg)</td>
                <td>单价</td>
                <td>总价</td>
                <td>比例%</td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeOne.rows" :key="item.detail+index">
                <td v-if="index === 0" :rowspan="meterialForm.form.typeOne.rows.length">{{ meterialForm.form.typeOne.name }}</td>
                <td>{{ item.detail }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.col1"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.col2"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeTwo.rows" :key="item.detail+index">
                <td v-if="index === 0" :rowspan="meterialForm.form.typeTwo.rows.length">{{ meterialForm.form.typeTwo.name }}</td>
                <td>{{ item.detail }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.col1"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.col2"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeThree.rows" :key="item.index">
                <td colspan="4">{{ meterialForm.form.typeThree.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeFour.rows" :key="item.index">
                <td colspan="4">{{ meterialForm.form.typeFour.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeFive.rows" :key="item.index">
                <td colspan="4">{{ meterialForm.form.typeFive.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeSix.rows" :key="item.index">
                <td colspan="4">{{ meterialForm.form.typeSix.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr v-for="(item, index) in meterialForm.form.typeSeven.rows" :key="item.index">
                <td colspan="4">{{ meterialForm.form.typeSeven.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col4"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col5"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col6"></q-input>
                </td>
              </tr>
              <tr>
                <td colspan="6">合计</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="meterialForm.total"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="meterialForm.ratio"></q-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </q-tab-pane>
      <q-tab-pane name="tab-4" class="q-pa-none">
        <div class="row q-pa-md">总计：{{total}}</div>
        <div class="q-table-container q-table-dense no-shadow">
          <table class="table-4 q-table q-table-cell-separator">
            <tbody>
              <tr>
                <td>工序</td>
                <td>工时</td>
                <td>工费</td>
                <td>金额</td>
                <td>比例%</td>
              </tr>
              <tr v-for="item in machineForm.form.rows" :key="item.name">
                <td>{{ item.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.col1"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline v-model.trim="item.col2"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col4"></q-input>
                </td>
              </tr>
              <tr>
                <td colspan="3">合计</td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="machineForm.total"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="machineForm.ratio"></q-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </q-tab-pane>
      <q-tab-pane name="tab-5" class="q-pa-none">
        <div class="row q-pa-md">总计：{{total}}</div>
        <div class="q-table-container q-table-dense no-shadow">
          <table class="table-5 q-table q-table-cell-separator">
            <tbody>
              <tr>
                <td>工序</td>
                <td>工时</td>
                <td>工费</td>
                <td>金额</td>
                <td>比例%</td>
              </tr>
              <tr v-for="item in personForm.form.rows" :key="item.name">
                <td>{{ item.name }}</td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col1"></q-input>
                </td>
                <td>
                  <q-input :readonly="readonly" align="center" hide-underline type="number" v-model.trim="item.col2"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col3"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="item.col4"></q-input>
                </td>
              </tr>
              <tr>
                <td colspan="3">合计</td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="personForm.total"></q-input>
                </td>
                <td>
                  <q-input readonly align="center" hide-underline v-model.trim="personForm.ratio"></q-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </q-tab-pane>
    </q-tabs>
  `,
  watch: {
    baseInfoForm: {
      handler: function(baseInfoForm) {
        this.$emit('change', [this.baseInfoForm, this.designForm, this.meterialForm, this.machineForm, this.personForm,])
      },
      deep:true
    },
    'designForm.form.rows': {
      handler: function(rows) {
        var that = this, colsum = 0
        rows.forEach(function(row) {
          if (row.col1 != '' && row.col2 != '') {
            row.col3 = row.col1 * row.col2
          } else {
            row.col3 = ''
          }
          colsum += row.col3
        })
        this.designForm.total = colsum
        // 算总价
        this.total = this.designForm.total*1 + this.meterialForm.total*1 + this.machineForm.total*1 + this.personForm.total*1
        // 占总价比例
        this.designForm.ratio = this.designForm.total / this.total * 100?this.designForm.total / this.total * 100 + '%': ''
        // 计算单条比例
        rows.forEach(function(row) {
          if (row.col1 != '' && row.col2 != '') {
            row.col3 = row.col1 * row.col2
            row.col4 = row.col3 / that.designForm.total * 100?row.col3 / that.designForm.total * 100 + '%': ''
          } else {
            row.col3 = ''
            row.col4 = ''
          }
        })
        this.$emit('change', [this.baseInfoForm, this.designForm, this.meterialForm, this.machineForm, this.personForm,])
      },
      deep: true
    },
    'meterialForm.form': {
      handler: function(form) {
        var that = this, colsum = 0
        form.typeOne.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        form.typeTwo.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        form.typeThree.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        form.typeFour.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        form.typeFive.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        form.typeSix.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        form.typeSeven.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
          } else {
            row.col5 = ''
          }
          colsum += row.col5
          colsum = colsum * 1
        })
        this.meterialForm.total = colsum
        this.total = this.designForm.total*1 + this.meterialForm.total*1 + this.machineForm.total*1 + this.personForm.total*1
        // 占总价比例
        this.meterialForm.ratio = this.meterialForm.total / this.total * 100?this.meterialForm.total / this.total * 100 + '%': ''
        // 计算单条比例
        form.typeOne.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        form.typeTwo.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        form.typeThree.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        form.typeFour.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        form.typeFive.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        form.typeSix.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        form.typeSeven.rows.forEach(function(row) {
          if (row.col3 != '' && row.col4 != '') {
            row.col5 = row.col3 * row.col4
            row.col6 = row.col5 / that.meterialForm.total * 100?row.col5 / that.meterialForm.total * 100 + '%': ''
          } else {
            row.col5 = ''
            row.col6 = ''
          }
        })
        this.$emit('change', [this.baseInfoForm, this.designForm, this.meterialForm, this.machineForm, this.personForm,])
      },
      deep: true
    },
    'machineForm.form.rows': {
      handler: function(rows) {
        var that = this, colsum = 0
        rows.forEach(function(row) {
          if (row.col1 != '' && row.col2 != '') {
            row.col3 = row.col1 * row.col2
          } else {
            row.col3 = ''
          }
          colsum += row.col3
        })
        this.machineForm.total = colsum
        this.total = this.designForm.total*1 + this.meterialForm.total*1 + this.machineForm.total*1 + this.personForm.total*1
        // 占总价比例
        this.machineForm.ratio = this.machineForm.total / this.total * 100?this.machineForm.total / this.total * 100 + '%': ''
        // 计算单条比例
        rows.forEach(function(row) {
          if (row.col1 != '' && row.col2 != '') {
            row.col3 = row.col1 * row.col2
            row.col4 = row.col3 / that.machineForm.total * 100?row.col3 / that.machineForm.total * 100 + '%': ''
          } else {
            row.col3 = ''
            row.col4 = ''
          }
        })
        this.$emit('change', [this.baseInfoForm, this.designForm, this.meterialForm, this.machineForm, this.personForm,])
      },
      deep: true
    },
    'personForm.form.rows': {
      handler: function(rows) {
        var that = this, colsum = 0
        rows.forEach(function(row) {
          if (row.col1 != '' && row.col2 != '') {
            row.col3 = row.col1 * row.col2
          } else {
            row.col3 = ''
          }
          colsum += row.col3
        })
        this.personForm.total = colsum
        this.total = this.designForm.total*1 + this.meterialForm.total*1 + this.machineForm.total*1 + this.personForm.total*1
        // 占总价比例
        this.personForm.ratio = this.personForm.total / this.total * 100?this.personForm.total / this.total * 100 + '%': ''
        // 计算单条比例
        rows.forEach(function(row) {
          if (row.col1 != '' && row.col2 != '') {
            row.col3 = row.col1 * row.col2
            row.col4 = row.col3 / that.personForm.total * 100?row.col3 / that.personForm.total * 100 + '%': ''
          } else {
            row.col3 = ''
            row.col4 = ''
          }
        })
        this.$emit('change', [this.baseInfoForm, this.designForm, this.meterialForm, this.machineForm, this.personForm,])
      },
      deep: true
    }
  },
  mounted: function() {
    var that = this
    this.data.forEach(function(f) {
      if (f.rfqTempItemCode == 'MOULD_BASE_INFO') {
        that.baseInfoForm = f
      }
      if (f.rfqTempItemCode == 'MOULD_DESIGN') {
        that.designForm = f
      }
      if (f.rfqTempItemCode == 'MOULD_RAW_MAT') {
        that.meterialForm = f
      }
      if (f.rfqTempItemCode == 'MOULD_MACHINE') {
        that.machineForm = f
      }
      if (f.rfqTempItemCode == 'MOULD_OTHERS') {
        that.personForm = f
      }
    })
  },
  methods: {
    
  }
})